<template>
	<view>
		
		<view class="inforFeedback_box">
			<form @submit="formSubmit">
				<view class="inforFeedback_con">
					<view class="feedbackTit">举报类型</view>
					<view class="feedbackType_con">
						<view class="typeItem" :class="typeName == item? 'active':''"
							v-for="(item,index) in typeArray" :key="index" @click="typeClick(item)">
							<view class="typeName">{{item}}</view>
						</view>
					</view>
					<view class="feedbackText_con">
						<textarea name="content" 
						placeholder="请输入你的建议或遇到的问题" 
						auto-blur="true"
						cursor-spacing="100"
						placeholder-class="placeholderColor" maxlength="-1"/>
					</view>
					<!-- <view class="feedbackUpload_con">
						<view class="uploadList">
							<view class="uploadItem" v-for="(item, index) in imgList" :key="index"
								v-if="imgList.length >0">
								<image :src="item.url" mode="aspectFill" @click="previewImg(item.url)"></image>
								<view class="delPic" @click="deleteImg(index)">
									<u-icon name="close-circle" color="#fa3534" size="50"></u-icon>
								</view>
							</view>
							<view class="uploadItem uploadBtn" @click="openUpload(index)">
								<u-icon name="plus" color="#BCBCBC" size="60"></u-icon>
							</view>
						</view>
					</view> -->
				</view>
				<!-- 底部操作 -->
				<view class="formPost_con">
					<button form-type="submit" class="submitBtn">提 交</button>
				</view>
			</form>
		</view>

		<!--上传图片-->
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>

	</view>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		data() {
			return {
				// 反馈类型
				typeArray: ['位置不准确','电话不准确','商家不存在'],
				typeName: '',

				// 上传图片
				isUpload: false, //是否打开上传图片
				imgList: [],
				imgIds: [],
			}
		},
		components: {
			Upload
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			console.log(option);
			var _this = this;
			_this.id = option.id;
		},
		onReady() {
			var _this = this;
			//_this.getTypeArray();
		},
		onShow: function() {
		
		},
		methods: {
			// 获取举报类型
			getTypeArray(){
				var _this = this;
				_this.$u.get('/api/report.index/report_calssly', {}).then(res => {
					uni.hideLoading();
					console.log("==获取举报类型==");
					console.log(res);
					_this.typeArray = res.data;
				})
			},
			
			// 选择类型
			typeClick(name) {
				console.log(name);
				this.typeName = name;
			},

			/**
			 * 上传图片
			 */
			// 打开上传图片
			openUpload() {
				this.isUpload = true;
			},

			// 获取上传的图片
			getImgsFunc(e) {
				// console.log(e);
				let _this = this;
				if (e && typeof(e) != 'undefined') {
					let index = _this.index;
					_this.imgList = _this.imgList.concat(e);
				}
				_this.isUpload = false;
			},

			// 预览图片
			previewImg(src) {
				let _this = this;
				// console.log(_this.imgList);
				var current = src;
				var imgList = _this.imgList;
				var imagesUrl = [];
				for (var i = 0; i < imgList.length; i++) {
					imagesUrl[i] = imgList[i].url;
				}
				// console.log(imagesUrl)

				uni.previewImage({
					current: current,
					urls: imagesUrl
				})
			},

			// 图片删除
			deleteImg(index) {
				// console.log(index);
				let _this = this;
				_this.imgList.splice(index, 1);
			},

			// 提交
			formSubmit(e) {
				// console.log(e);
				var _this = this;
				var formData = e.detail.value;

				if (!_this.typeName) {
					uni.showModal({
						content: '请选择举报类型',
						showCancel: false,
					})
					return;
				}

				if (!formData.content) {
					uni.showModal({
						content: '举报内容不能为空',
						showCancel: false,
					})
					return;
				}

				// if (_this.imgList.length==0) {
				// 	uni.showModal({
				// 		content: '图片不能为空',
				// 		showCancel: false,
				// 	})
				// 	return;
				// }

				// 上传图片
				let imgList = _this.imgList;
				let imgIds = _this.imgIds;
				for (var i = 0; i < imgList.length; i++) {
					imgIds.push(imgList[i].imgID)
				}
				console.log("==图片id数组==");
				console.log(imgIds);

				_this.$u.post('/api/plus.report/add_do', {
					report_source_id: _this.id,
					report_type: '4',
					images_id: imgIds.join(','),
					content: formData.content,
					report_classly: _this.typeName,
				}).then(res => {
					console.log(res);

					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

		}
	}
</script>

<style scoped>
	.inforFeedback_box {
		width: 690rpx;
		margin: 0 auto;
	}
	
	.inforFeedback_con{
		padding: 0 30rpx;
		background-color: #fff;
		overflow: hidden;
		margin: 30rpx 0;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 16rpx 0rpx rgba(24, 24, 24, 0.13);
		overflow: hidden;
	}

	/* 反馈类型 */
	.feedbackTit {
		padding: 30rpx 0;
		font-size: 30rpx;
		color: #333;
	}

	.feedbackType_con {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		display: flex;
	}

	.typeItem {
		padding: 0 20rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 28rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.typeItem.active {
		color: #0088fd;
		border: 2rpx solid #0088fd;
		
		
		/* background: linear-gradient(45deg, #36a2ff 0%, #0088fd 100%); */
	}

	.feedbackText_con {
		padding: 30rpx 0;
		overflow: hidden;
		width: 100%;
	}

	.feedbackText_con textarea {
		height: 200rpx;
		font-size: 28rpx;
		width: 100%;
		position: relative;
		z-index: 999;
	}

	.feedbackUpload_con {
		margin-top: 30rpx;
	}
	
	/* 按钮 */
	.formPost_con{
		padding: 0 0rpx;
		width: 690rpx;
		margin-top: 20rpx;
	}
</style>
